<template>
  <div>
    <v-dialog title="查看" :show.sync="dialogVisible" :destroy-on-close="true" @beforeClose="beforeClose" width="1200px">
      <div class="card-box">
        <div class="data-title" style="margin-left: 20px">基本信息</div>
        <div class="info-list mb20">
          <span style="font-size: 16px ; text-blink: #000">{{form.projectName}}</span>
        </div>
        <el-form class="card-box">
          <div class="info-list mb20" style="font-size: 16px">
            <dl>
              <dt>建筑面积(m²)</dt>
              <dd>{{form.buildingArea}}</dd>
            </dl>
            <dl>
              <dt>月租金(元)</dt>
              <dd>{{form.rentAmount}}</dd>
            </dl>
            <dl>
              <dt>合同期限</dt>
              <dd>{{form.costPeriodStart}}至{{form.costPeriodEnd}}</dd>
              <dd>
                <el-button type="text" class="viewContract" @click.stop="showData(form.lessorContractId)">查看合同</el-button>
              </dd>
            </dl>
            <dl>
              <dt>合同总金额(元)</dt>
              <dd>{{data.accumulatedAmountReceivedCount}}</dd>
            </dl>
            <dl>
              <dt>累计已收款金额(元)</dt>
              <dd>
                {{data.accumulatedAmountReceived}}
                <a
                  type="text"
                  style="margin-left: 120px;color: #1b68e8;cursor:pointer"
                  @click.stop="showpayableMoneyData(form)"
                >查看</a>
              </dd>
            </dl>
            <dl>
              <dt>累计剩余余款(元)</dt>
              <dd>{{data.accumulatedAmountReceivedCount-data.accumulatedAmountReceived}}</dd>
            </dl>
            <dl>
              <dt>付款人</dt>
              <dd>{{form.costProjectName}}</dd>
            </dl>
          </div>
        </el-form>
      </div>
      <div class="card-box">
        <div class="data-title" style="margin-left: 20px">收款信息</div>
        <el-form>
          <div class="info-list mb20" style="font-size: 16px">
            <dl>
              <dt>本次应付款金额(元)</dt>
              <dd>{{form.payableMoney}}</dd>
            </dl>
            <dl>
              <dt>收款费用周期</dt>
              <dd>{{form.costPeriodStart}}至{{form.costPeriodEnd}}</dd>
            </dl>
            <dl>
              <dt>收款日期</dt>
              <dd>{{form.payableDate}}</dd>
            </dl>
            <dl>
              <dt>本次收款金额(元)</dt>
              <dd>{{form.payableMoney}}</dd>
            </dl>
            <dl>
              <dt>备注</dt>
              <dd>{{form.remarks}}</dd>
            </dl>
          </div>
        </el-form>
      </div>
      <div class="card-box" style="text-align: right">
        <el-button type="primary" size="small" @click="go()">关闭</el-button>
      </div>
    </v-dialog>
    <show-receivable ref="showReceivable"></show-receivable>
    <contract-view ref="contractView"></contract-view>
  </div>
</template>

<script>
import { showReceivableList } from '@/views/wy-lessor/rentalSociety/api/finance-collection-receivable'
import showReceivable from '../edit/show-receivable'
import contractView from "@/views/rent/contract/view.vue"
import { getConsolidatedCollection } from '@/views/wy-lessor/rentalSociety/api/finance-collection-actual'
export default {
  name: "show-actual",
  components: { showReceivable, contractView },
  data () {
    return {
      form: {},
      unitPrice: '',
      dialogVisible: false,
      accumulatedAmountReceived: '',
      data: {
        lessorContract: {},
        accumulatedAmountReceived: '',
        accumulatedSurplus: '',
        amountOfReceivables: '',
        consolidatedCollectionFeeCycle: [],
        contractId: '',
        receivableId: '',
        taxes: '',
        taxAmount: '',
        collectionRemarks: '',
      },
    }
  },
  methods: {
    show (item) {
      this.dialogVisible = true
      if (item) {
        let accumulatedAmountReceived = 0
        this.form = item
        this.unitPrice = this.form.rentAmount / this.form.buildingArea
        showReceivableList(item.lessorContractId).then(res => {
          this.tableData = res.data.data
          this.tableData.map(data => {
            this.accumulatedAmountReceived += data.payableMoney
          })
        })
        this.accumulatedAmountReceived = accumulatedAmountReceived
      }
      getConsolidatedCollection(this.form.lessorContractId, this.form.receivableId).then(resp => {
        this.data = resp.data.data;
      })
    },
    go () {
      this.dialogVisible = false
    },
    showpayableMoneyData (item) {
      item.accumulatedAmountReceived = this.data.accumulatedAmountReceived
      item.accumulatedAmountReceivedCount = this.data.accumulatedAmountReceivedCount
      this.$refs.showReceivable.show(item)
    },
    //查看合同
    showData (contractId) {
      this.$refs.contractView.show(contractId);
    },
    beforeClose (done) {
      done()
    }
  }
}
</script>

<style lang='scss' scoped>
@include data-title();
@include info-list(3);
@include formWrap(3);
</style>
